<template>
  <div>
    <a-tree
      :treeData="list"
      :replaceFields="{children:'children', title:'name', key:'id' }"
      checkable
      :checkStrictly="multiple===false"
      :checkedKeys="checkedKeys"
      @check="onCheck"
    />
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    modelVal: {
      type: Array,
      default: () => {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      list: [{
        name: 'node1',
        id: '1',
        children: [
          {
            name: 'node11',
            id: '11',
            children: [
              { name: 'node111', id: '111' },
              { name: 'node112', id: '112' },
              { name: 'node113', id: '113' }
            ]
          },
          {
            name: 'node12',
            id: '12',
            children: [
              { name: 'node121', id: '121' },
              { name: 'node122', id: '122' },
              { name: 'node123', id: '123' }
            ]
          }
        ]
      }, {
        name: 'node2',
        id: '2',
        children: [
          {
            name: 'node21',
            id: '21',
            children: [
              { name: 'node211', id: '211' },
              { name: 'node212', id: '212' },
              { name: 'node213', id: '213' }
            ]
          },
          {
            name: 'node22',
            id: '22',
            children: [
              { name: 'node221', id: '221' },
              { name: 'node222', id: '222' },
              { name: 'node223', id: '223' }
            ]
          }
        ]
      }],
      checkedKeys: []
    }
  },
  mounted () {
  },
  watch: {
    modelVal (newVal) {
      this.checkedKeys = newVal
    },
    checkedKeys (val) {
      this.$emit('change', val)
    }
  },
  methods: {
    onCheck (checkedKeys, info) {
      if (this.multiple) {
        this.checkedKeys = checkedKeys
      } else {
        this.checkedKeys = [info.node.dataRef.id]
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
